<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<title>POS收单运营管理平台</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link href="<s:url value="/css/common.css"/>" type="text/css"
	rel="stylesheet" />

<script type="text/javascript"
	src="<s:url value="/js/jquery-1.9.1.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/jquery.blockUI.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/jquery.validate.min.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/pwms.validate.js?v13" />"></script>
<script language="javascript" type="text/javascript"
	src="<s:url value="/js/My97DatePicker/WdatePicker.js"/>"></script>
<script type='text/javascript' src='<s:url value="/dwr/engine.js"/>'></script>
<script type='text/javascript'
	src='<s:url value="/dwr/interface/MccQuery.js"/>'></script>
<script type='text/javascript' src='<s:url value="/js/querySon.js"/>'></script>
<script type='text/javascript' src='<s:url value="/js/YLlightbox.js"/>'></script>
<script type='text/javascript' src='<s:url value="/js/ajaxfileupload.js"/>'></script>
<style type="text/css">
.error {
	color: red;
}
</style>

</head>

<body>
<s:hidden id="isMid" value="%{merinfo.busiRang}"></s:hidden>
<s:hidden id="orgCodes" value="%{#session.session_merchant.orgCode}"></s:hidden>
			<div id="caption">
			<s:form action="" method="post" theme="simple">
			<table width="100%" class="tb">
			<tr class="tb-line">
				<td class="tb-td" colspan="4">
					<div class="tb-h2">POS收单运营管理平台</div>
				</td>
			</tr>
			<tr class="tb-line bg-gray">
				<td class="tb-td" colspan="4"><div class="tb-h3" id="title">首次开通支付宝微信扫码</div></td>
			</tr>
			</table>
			</s:form>
			</div>

		<div id="saoma">
		<s:form id="scanCode" action="/opcard/sendScanCode.ct" method="post"
				theme="simple">
			<s:hidden name="openType" value="1"></s:hidden>
			<table width="100%" class="tb">
				<tr class="tb-line">
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">商户号：</div>
					</td>
					<td class="tb-td" style="width: 480px;">
						<s:property value="merinfo.id"/>
						<s:hidden id="cd" name="opMchtCd"></s:hidden>
					</td>
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">商户名称：</div>
					</td>
					<td class="tb-td"><s:property value="merinfo.name"/>
					</td>
				</tr>
				<tr class="tb-line">
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">商户简称：</div>
					</td>
					<td class="tb-td">
						<s:property value="merinfo.nameBusi"/>
					</td>
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">客服电话：</div>
					</td>
					<td class="tb-td">400-607-8866
					</td>
				</tr>
				<tr class="tb-line">
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">店铺地址：</div>
					</td>
					<td class="tb-td">
					<s:property value="merinfo.regAddr"/>
					</td>
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">联系手机号：</div>
					</td>
					<td class="tb-td"><s:property value="merinfo.contactPhoneNo"/>
					</td>
				</tr>
				<tr class="tb-line">
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">注册地址：</div>
					</td>
					<td class="tb-td">
					<s:select cssStyle="width:100px" id="pro" name="provice" listKey="code" listValue="name"   list="dicMap"  headerKey="0" headerValue="请选择" />
	                <s:select cssStyle="width:100px" id="city" name="city" list="#{'0':'请选择' }"  />
			      	<s:select cssStyle="width:100px" id="area"  name="area" list="#{'0':'请选择' }"  />
					<font color="red">*</font>
					<s:hidden id="p" name="dic.provice"></s:hidden>
					<s:hidden id="c" name="dic.city"></s:hidden>
					<s:hidden id="a" name="dic.area"></s:hidden>
					</td>
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">商户类别：</div>
					</td>
					<td class="tb-td">
					<s:select cssStyle="width:100px" class="chooseCategory" name="stairname" listKey="STAIRNAME" listValue="STAIRNAME"   list="#request.stairname"  headerKey="0" headerValue="请选择" />
	                <s:select cssStyle="width:100px" class="moversname" list="#{'0':'请选择' }"   name="moversname"/>
			      	<s:select cssStyle="width:100px" class="flyersname" list="#{'0':'请选择' }"   name="yycard.categoryId"/>
					<font color="red">*</font>
					</td>
				</tr>
				<%-- <tr class="tb-line">
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">联系人微信姓名：</div>
					</td>
					<td class="tb-td">
						<label class="tb-input-lengthen">
						<s:textfield maxLength="200" placeholder="微信姓名必填" name="yycard.wxName" cssClass="queryWidth"></s:textfield>
						</label>
					<font color="red">*</font>
					</td>
					<td align="right" class="tb-td" style="width: 110px;">
						<div class="tb-h4">联系人微信号：</div>
					</td>
					<td class="tb-td">
					<label class="tb-input-lengthen">
						<s:textfield maxLength="200" placeholder="微信号必填" name="yycard.wx" cssClass="queryWidth"></s:textfield>
					</label>
					<font color="red">*</font>
					</td>
				</tr>			 --%>				
			</table>
			
	<div class="tab-body" id="tabBody" style="width:100%">
    <div class="tab-title bg-gray" style="width:100%">
        <div class="tb-title active">扫码资料上传</div>
    </div>
			<div class="tab-cnt" style="width:100%;">
			<table class="tb tb-pic YLlightbox">
            	<tbody>
            	<tr class="tb-line">
                    <td class="tb-td" colspan="6">
                        <div class="tb-h3"><font color="red">提示：带&nbsp;*&nbsp;为必传项！</font> </div>
                    </td>
                </tr>
				<tr class="tb-line">
                    <td width="3%" class="tb-td"></td>
                    <td width="20%" style="min-width: 240px" class="tb-td">
                        <div class="pic-uploading">
                            <p>手持身份证图片</p>
                            <input  type="file" name="file" id="imgOne" onchange="uploadImg(this.id,'99');"  accept="image/*" capture="camera" />
                            <s:hidden id="imgOneId" name="pictrueList[0].Url" />
                            <a rel="YLlightbox">
                                <img />
                            </a>
                            <i class="delete-pic"></i>
                        </div>
                        <div class="tb-normal" id="divOne">请上传手持身份证图片<code class="asterisk">*</code></div>
                    </td>
                    <td width="20%" style="min-width: 240px" class="tb-td">
                        <div class="pic-uploading" id="div1">
                            <p>商户门头图片</p>
                            <input type="file" name="file"id="imgTwo"  onchange="uploadImg(this.id,'98');"  accept="image/*" capture="camera" />
                            <s:hidden id="imgTwoId" name="pictrueList[1].Url" />
                            <a rel="YLlightbox">
                                <img />
                            </a>
                            <i class="delete-pic"></i>
                        </div>
                        <div class="tb-normal" id="divTwo">请上传商户门头图片<code class="asterisk">*</code></div>
                    </td>
                    <td width="20%" style="min-width: 240px" class="tb-td">
                        <div class="pic-uploading">
                            <p>营业执照图片</p>
                            <input type="file" name="file" id="imgThree" onchange="uploadImg(this.id,'97');" accept="image/*" capture="camera" />
                            <s:hidden id="imgThreeId" name="pictrueList[2].Url" />
                            <a rel="YLlightbox">
                                <img />
                            </a>
                            <i class="delete-pic"></i>
                        </div>
                        <div class="tb-normal" id="divThree">请上传营业执照图片</div>
                    </td>
                    </tr>
                    </tbody>
             </table>
             </div>
             </div>
			<table width="100%" border="0" cellspacing="0" class="table">
				<tr class="tb-line">
					<td colspan="4" align="center"><span style="color: red"><s:actionerror /></span>
						<span style="color: red;"><s:actionmessage /></span> <span
						style="color: red;"><s:fielderror cssClass="fieldError" /></span>
						<span id="otherError"></span></td>
				</tr>
				<tr class="tb-line">
					<td class="tb-td line-submit" align="center" colspan="4">
					<label class="tb-input-submit">
						<s:submit id="btnCode" value="开 通" />
					</label> 
					<label class="tb-input-submit"> 
					<input type="reset" value="重置" id="resetCode" class="reset"/>
					</label>
					<label class="tb-input-submit"> 
						<input type="button" value="返回" onclick="history.back()"/>
					</label>
					</td>
				</tr>
			</table>
		</s:form>
		</div>	
	<s:if test="msg!=null">
	<script type="text/javascript">
    alert("${msg}");
	</script>
</s:if>
</body>

<script type="text/javascript">
$(function(){
	changeTitle();
	$('.reset').click(function(){
		$(".moversname").empty();
		$(".flyersname").empty();
		$(".moversname").append("<option value='0'>请选择</option>");
		$(".flyersname").append("<option value='0'>请选择</option>");
	});
	//加载城市
	$("#pro").change(function(){
		$("#city").empty();
		$("#city").append("<option value='0'>请选择</option>");
		$("#area").empty();
		$("#area").append("<option value='0'>请选择</option>");
		var pro=$(this).val();
		if(pro=='0'){
			return;
		}
		var p=$("#pro option:selected").text();
		$('#p').val(p);
		$.ajax({
		 	url:'<s:url value="/opcard/loadPCA.ct"/>',
		 	data:'dic.pcode='+pro,
	  		dataType:"json",
	  		type:"POST",
	  		success:function(data){
	  			for (var i=0;i<data.length;i++) {   	  				
	  				$("#city").append("<option value='"+data[i].code+"'>"+ data[i].name+ "</option>");
	  			 }
	  		},error:function(rsg){
	  			alert("加载城市类目出错，请联系客服~！");
	  		}	
	 	}); 
	});
	//加载地区
	$("#city").change(function(){
		$("#area").empty();
		$("#area").append("<option value='0'>请选择</option>");
		var city=$(this).val();
		if(city=='0'){
			return;
		}		
		var c=$("#city option:selected").text();
		$('#c').val(c);
		$.ajax({
		 	url:'<s:url value="/opcard/loadPCA.ct"/>',
		 	data:'dic.pcode='+city,
	  		dataType:"json",
	  		type:"POST",
	  		success:function(data){
	  			for (var i=0;i<data.length;i++) {   	  				
	  				$("#area").append("<option value='"+data[i].code+"'>"+ data[i].name+ "</option>");
	  			 }
	  		},error:function(rsg){
	  			alert("加载区县类目出错，请联系客服~！");
	  		}	
	 	}); 
	});
	
	$("#area").change(function(){
		var a=$("#area option:selected").text();
		$('#a').val(a);
	});
	//加载二级类目
	$(".chooseCategory").change(function(){
		moversnameLoad();
	});
	function moversnameLoad()
	{
		$(".moversname").empty();
		$(".flyersname").empty();
		$(".moversname").append("<option value='0'>请选择</option>");
		$(".flyersname").append("<option value='0'>请选择</option>");
		var stairname=$(".chooseCategory:eq(0)").val();
		if(stairname==0){
			stairname=$(".chooseCategory:eq(1)").val();
		}
		$.ajax({
		 	url:'<s:url value="/opcard/categoryType.ct"/>',
		 	data:'stairname='+stairname,
	  		dataType:"json",
	  		type:"POST",
	  		success:function(data){
	  			for (var i=0;i<data.length;i++) {   	  				
	  				$(".moversname").append("<option value='"+data[i].moversname+"'>"+ data[i].moversname+ "</option>");
	  			 }
	  		},error:function(rsg){
	  			alert("加载二级类目出错，请联系客服~！");
	  		}	
	 	}); 
	}
	//加载三级类目
	$(".moversname").change(function(){
		$(".flyersname").empty();
		$(".flyersname").append("<option value='0'>请选择</option>");
		var stairname=$(".chooseCategory:eq(0)").val();
		if(stairname==0){
			stairname=$(".chooseCategory:eq(1)").val();
		}
		var moversname=$(".moversname:eq(0)").val();
		if(moversname==0){
			moversname=$(".moversname:eq(1)").val();
		}
		$.ajax({
		 	url:'<s:url value="/opcard/categoryType.ct"/>',
		 	data:'stairname='+stairname+'&moversname='+moversname,
	  		dataType:"json",
	  		type:"POST",
	  		success:function(data){
	  			for (var i=0;i<data.length;i++) {   	  				
	  				$(".flyersname").append("<option value='"+data[i].categoryid+"'>"+ data[i].flyersname+ "</option>");
	  			 }
	  		},error:function(rsg){
	  			alert("加载三级类目出错，请联系客服~！");
	  		}	
	 	});   		
	});
	//添加下拉商户类目菜单验证
	jQuery.validator.addMethod("isCategory",function(value,element){
		if(value=='0')
		{	
			return this.optional(element) || false;
		}
		return this.optional(element) || true;
	},"请选择商户类别!");
	jQuery.validator.addMethod("isPCA",function(value,element){
		if(value=='0')
		{	
			return this.optional(element) || false;
		}
		return this.optional(element) || true;
	},"请选择省市县!");
	//商户父类别
	jQuery.validator.addMethod("isRequired",function(value,element){
		if(value=='0')
		{	
			return this.optional(element) || false;
		}
		return this.optional(element) || true;
	},"");
	//验证手机号
	jQuery.validator.addMethod("isCellphone",function(value,element){
		 var length = value.length;
		 var mobile = /^(1[34578][0-9]{9})$/;
		 return this.optional(element) || (length == 11 && mobile.test(value));
	},"请正确填写您的手机号码");
	//验证表单
	$('#scanCode').validate({
				debug : true,
				submitHandler:function(form){
					 $('#title').text("正在开通中，请稍等。。。");
					 $("#btnCode").attr("disabled",true);
					 $("#resetCode").attr("disabled",true);
					 form.submit();
				},
				rules:{
					"provice":{required : true,isRequired:true},
					"city":{required : true,isRequired:true},
					"area":{required : true,isPCA:true},
					"stairname":{required : true,isRequired:true},
					"moversname":{required : true,isRequired:true},
					"yycard.categoryId":{required : true,isCategory:true},
					"pictrueList[0].Url":{required: true},
					"pictrueList[1].Url":{required: true},
					"pictrueList[2].Url":{required: true}
					/* "yycard.wx":{required: true},
					"yycard.wxName":{required: true} */
				},
				messages:{
					"provice":{required : "必选"},
					"city":{required : "必选"},
					"area":{required : "必选"},
					"stairname":{required : "必选"},
					"moversname":{required : "必选"},
					"yycard.categoryId":{required : "必选"},
					"pictrueList[0].Url":{required:"未上传"},
					"pictrueList[1].Url":{required:"未上传"},
					"pictrueList[2].Url":{required:"未上传"}
					/* "yycard.wx":{required : "必填"},
					"yycard.wxName":{required : "必填"} */
				},errorPlacement: function(error, element) { 
				    if ( element.is(":radio") ) error.appendTo ( element.parent() ); 
				    else if ( element.is(":checkbox") ) error.appendTo (element.parent()); 
				    else if ( element.is("input") ) error.appendTo ( element.parent().next()); 
				    else if ( element.is("select") ) error.appendTo (element.next()); 
				    else error.insertAfter(element); 
				} 
			});

	function changeTitle(){
		$(".chooseCategory").val("0");
		$(".moversname").empty();
		$(".flyersname").empty();
		$(".moversname").append("<option value='0'>请选择</option>");
		$(".flyersname").append("<option value='0'>请选择</option>");	
	}	
	$('.delete-pic').on('click',deleteImage);
})

</script>

</html>
